import React, { useEffect, useState } from 'react';
import { Form, Col, Space, Input, Select, Button, Radio, DatePicker, Table, Modal } from 'antd';
import { WidthProvider, Responsive } from "react-grid-layout";
import _ from "lodash";
import Warningpending from '@/pages/Config/components/Warningpending';
import styles from '../index.module.scss';
import ConfigModal from './ConfigModal';
const ResponsiveReactGridLayout = WidthProvider(Responsive);

interface IProps {
  total?: number; // 总数量
  columns?: number; // 列数
  data?: any; // 配置数据
  onDataChange?: (data: any) => void;
}

const ConfigCardsCom = (props: IProps) => {
  const [config, setConfig] = useState<any>();
  const [widgets, setWidgets] = useState<any>([]);

  const [open, setOpen] = useState(false);// 配置弹框


  //初始化
  useEffect(() => {
    // 初始化列数配置
    let col = props.columns || 4;
    setConfig({
      cols: { lg: col, md: col, sm: col, xs: col, xxs: col },
      rowHeight: 100,
    })
    // 初始化占位
    let tot = props.total || 0;
    let itemData: any;
    itemData = Array(tot).fill(0).map((item, index) => {
      return {
        x: index % col,
        y: index / col, // puts it at the bottom
        w: 1,
        h: 2,
        i: index +'-'+ new Date().getTime().toString(),
        type: '',
        isResizable: true,
        isDraggable: true
      }
    })
    console.log('初始化数据=',itemData)
    setWidgets(itemData);
  }, [props.total, props.columns])


   
   useEffect(() => {
    if(widgets && widgets.length >0) {
      console.log('变更后的数据=',widgets)
    }
  }, [widgets])


  const generateDOM = () => {
    console.log(widgets, 'widgets');

    //根据不同的类型生成不同的组件
    return _.map(widgets, (l, i) => {
      // if (l.type == 'warrning') {
      return <div
        className={styles.warningpendCard}
        key={l.i}
        data-grid={l}
      ><Warningpending l={l}></Warningpending></div>
      // }
    });
  }

  const addCards = (type) => {
    // const addItem = {
    //   x: (widgets.length * 1) % (12),
    //   y: Infinity, // puts it at the bottom
    //   w: 1,
    //   h: 2,
    //   i: new Date().getTime().toString(),
    //   type,
    //   // title: '异动超过阙值111',
    //   // newYj: '2',
    //   // pedding: '12',
    //   // icon: '666',
    // }
    // setWidgets([...widgets, addItem]);
  }

  const onLayoutChange = (layout, layouts) => {
    console.log(111, '111');
    const o = Object.keys(layouts).reduce((a, b) => {
      a[b] = layouts[b];
      return a;
    }, {});
    Object.keys(o).map((key) => {
      setWidgets(o[key]);
    })
  }

  return <div className={styles.warningpend}>
    <Button onClick={() => addCards('warrning')}>添加卡片</Button>
    <Button type="primary" onClick={()=>setOpen(true)}> Modal</Button>
    <ResponsiveReactGridLayout
      className="layout"
      // layouts={newlayouts}
      {...config}
      onLayoutChange={(layout, layouts) =>
        onLayoutChange(layout, layouts)
      }
    >
      {generateDOM()}
    </ResponsiveReactGridLayout>

    <ConfigModal modalShow={open} setModalShow={setOpen}/>
  </div>

}
export default ConfigCardsCom;
